<template>
  <div class>
    <div class="ms-login">
      <el-form name="lgform" @submit.native.prevent id="loginForm" label-width="80px">
        <el-form-item label="用户名" label-width="70px">
          <el-input
            size="small"
            type="text"
            name="Username"
            placeholder="用户名"
            v-model="formMess.username"
            required
            @input="change($event)"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="70px">
          <el-input
            type="password"
            name="Password"
            placeholder="密码"
            v-model="formMess.password"
            required
            @input="change($event)"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" label-width="70px">
          <td>
            <el-input
              type="text"
              name="code"
              placeholder="输入验证码"
              v-model="formMess.code"
              required
              @input="change($event)"
            ></el-input>
          </td>

          <td>
            <img :src="codeImg" id="CreateCheckCode" alt="验证码" />
          </td>
          <td>
            <a href="javascript:void(0)" @click="changeCodeImg()" id="a2">
              看不清
              <br />
换一张
            </a>
          </td>
          <td>
            <label id="codeTip"></label>
          </td>
        </el-form-item>
        <el-form-item>
          <el-switch
            v-model="formMess.remember_me"
            active-color="#13ce66"
            inactive-color="#ff4949"
            name="remember-me"
            class="remember"
            @input="change($event)"
          ></el-switch>
          <label class="remLa">记住密码</label>
        </el-form-item>
        <el-form-item style="border: none;margin: 4px 2px; ">
          <div class="login-btn">
            <input type="submit" value="登陆" @click="isEmpty()" style="float: left;" />
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      formMess: {
        username: "",
        password: "",
        code: "",
        remember_me: ""
      },

      codeImg: "",
      value: true,
      isOk: false,
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.changeCodeImg();
  },
  methods: {
    change(e) {
      this.$forceUpdate(e);
    },

    changeCodeImg: function() {
      this.$axios({
        method: "POST",
        url: "/ssms/getCheckCode",
        responseType: "blob"
      })
        .then(res => {
          let blob = new Blob([res.data], { type: "data:image/jpeg;base64" });
          let url = window.URL.createObjectURL(blob);
          this.codeImg = url;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // setCookie: function(cname, cvalue, exdays) {
    //   var d = new Date();
    //   d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
    //   var expires = "expires=" + d.toGMTString();
    //   document.cookie = cname + "=" + cvalue + "; " + expires;
    // },

    //用来提示账号密码不能为空
    isEmpty() {
      this.$axios({
        method: "POST",
        url: "/ssms/securityLogin",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        withCredentials: true,
        params: {
          username: this.formMess.username,
          password: this.formMess.password,
          code: this.formMess.code,
          remember_me: this.formMess.remember_me
        }
      })
        .then(res => {
          console.log(res);

          if (res.data.code === 0) {
            this.$store.commit("setUser", res.data.obj.username);
            this.$store.commit("setUID", res.data.obj.u_id);
            this.$store.commit("setEmail", res.data.obj.email);
            this.$store.commit("setRealname", res.data.obj.realname);
            this.$store.commit("setRegisterDate", res.data.obj.registerDate);
            this.$store.commit("setLastLogin", res.data.obj.lastLogin);
            if (res.data.obj.authorities.length === 2) {
              this.$router.push("/hotelManager/Manager");
              this.$store.commit("setPrivilege", 1);
            }
            if (res.data.obj.authorities.length === 1) {
              this.$router.push("/userView/myself");
              this.$store.commit("setPrivilege", 2);
            }
            this.$message("欢迎您进入瑞豪酒店预订系统");
          } else if (res.data.code === 2) {
            alert("登录失败" + res.data.obj);
            this.$router.push("/userView/rooms");
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped>
.ms-login {
  text-align: left;
  margin-top: 5px;
}
#loginForm {
  width: 430px;
  background: rgb(255, 255, 255);
  border: none;
}
</style>



<!-- 
<template>
  <div class="form" id="login">
    <el-form>
      <el-input type="text" name="Username" placeholder="用户名" v-model="username" clearable required ></el-input>
    </el-form>
    <el-form>
      <el-input type="password" name="Password" placeholder="密码" v-model="password"  clearable required></el-input>
    </el-form>
    
    <div slot="footer" class="dialog-footer" align="center">
      <el-button type="primary" v-on:click="login" style="width:55vh">登 录</el-button>
    </div>
  </div>
</template>

<script type="text/javascript">
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: ""
    };
  },

  components: {
  },

  filters: {},

  computed: {},

  methods: {
    setCookie: function(cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
      var expires = "expires=" + d.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    },
    userEmitEmpty() {
      this.$refs.userNameInput.focus();
      this.userName = "";
    },
    passwordEmitEmpty() {
      this.$refs.passwordInput.focus();
      this.password = "";
    },
    login() {
      if (this.username == "a" && this.password == "b") {
        this.setCookie("username", this.username, 30);
        this.setCookie("password", this.password, 30);
        window.location.href = "index.html";
      } else {
        alert("账号或者密码错误！");
      }
    },
    created() {
      if (
        JSON.parse(localStorage.getItem("user")) &&
        JSON.parse(localStorage.getItem("user")).userName
      ) {
        this.userName = JSON.parse(localStorage.getItem("user")).userName;
        this.password = JSON.parse(localStorage.getItem("user")).password;
      }
    },
    computed: {
      btnText() {
        if (this.isBtnLoading) return "登录中...";
        return "登录";
      }
    },
    methods: {
      login() {
        if (!this.userName) {
          this.$message.error("请输入用户名");
          return;
        }
        if (!this.password) {
          this.$message.error("请输入密码");
          return;
        }
      }
    }
  }
};
</script>

<style>
</style>
